<?xml version="1.0"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Font-Face - External CSS</title>
    <link rel="stylesheet" type="text/css" href="styles/style.css"/>
    <link href='http://fonts.googleapis.com/css?family=Chela+One' rel='stylesheet' type='text/css'/>
</head>
<body>
<div>
    <h1>Font-Face specified in external css file</h1>
    <table>
        <tr>
            <td>
                <div class="myFont">This is standard font.</div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="myFont1">This should be a different font.</div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="myFont2">This should be a different font.</div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="myFont3">This should be a different font.</div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="myFont4">This references a missing font.</div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="myFont5">This references an incorrect font path.</div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="myFont6">This references a null font path.</div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="ex1">This references font style.</div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="myFont7">This references an external font</div>
            </td>
        </tr>
        <tr>
            <td>
                <div style="font-family: 'Chela One', cursive;">This references a font from <a href="http://www.google.com/fonts">Google Fonts</a></div>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
